<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var obj = {}

    var person = {
      name: '小明',
      hobby: ['学习', ['打球', '购物'], '跑步']
    }

    // var person = '小红'

    function deepClone (obj) {
      if (obj === null) return obj
      if (obj instanceof Date) return new Date(obj)
      if (obj instanceof RegExp) return new RegExp(obj)
      if (typeof obj !== 'object') return obj
      var cloneObj = new obj.constructor()
      // var cloneObj = {}
      for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
          cloneObj[i] = deepClone(obj[i])
        }
      }
      return cloneObj
    }

    var person1 = deepClone(person)
    // var person1 = JSON.parse(JSON.stringify(person)) // 有缺陷 无法拷贝date 正则 以及函数
    person1.name = '小强'

    person1.hobby[0] = '玩游戏'

    console.log(person)
    console.log(person1)

    // 浅拷贝的实现方式
    // ...
    // concat
    // lodash clone

    // 深拷贝的实现方式
    // $.extend
    // deepClone

    // 深拷贝可以在vue解决当初考核时填写表单外部数据也跟着变化的问题
  </script>
</body>
</html>